<template>
  <el-container class="height100  domainMainContent containerHeight">
    <el-aside class="dept-aside   height100" >
      <department_tree @node-click="onNodeClick" :key="timer" :invalid="true" :superiorId="searchdata.superiorid"/>
    </el-aside>
    <el-container  class="height100 Dept height100   borderR "  ref="departmentCon">
       <chunk_item
      ref="chunkItem"
      :headerArr="headerArr"
      :searchItemArr="searchItemArr"
      :tableArr="tableArr"
      :searchChilddata.sync="searchdata"
      @onChunkBtnClick="onChunkBtnClick"
      />
      
      <!-- 新建编辑时出现弹窗 -->
      <dialog_item :dialogTitle="dialogTitle" @onBtnDialogClick="onBtnDialogClick" :visible.sync="detailVisible">
        <department_detail
          ref="editDetail"
          v-if="detailVisible"
          :detail="content"
          @onSelectDept="onSelectDept"
          @back="updateList"
          />
    </dialog_item>
    </el-container >

    <department_select :visible.sync="deptSelectVisible" :invalid="true" @select-ok="onSelectDeptOk" v-if="deptSelectVisible" />
    <fileUpload :visible.sync="fileUploadVisible" v-if="fileUploadVisible" :nowOption="nowOption" @success="updateDept"/>
  </el-container>
</template>

<script>
import department_tree from "@/components/department_tree.vue";
import department_select from "@/components/department_select.vue";
import department_detail from "@/components/department_detail.vue";
import chunk_item from "@/components/common/chunk_item.vue"
import fileUpload from "@/components/fileUpload.vue";
export default {
  components: {
    department_tree,
    department_select,
    fileUpload,
    department_detail,
    chunk_item
  },
  created() {
    this.searchTableData();
    //关于标题的处理
    this.headerArr={iconfont:'icon-icon_bm_off',content:this.$t('dept_list'),btnArr:[{type:'primary',name:'new',label:this.$t('new')},{name:'import',label:this.$t('department_import')},{type:'danger',name:'del',label:this.$t('del')}] }
    //在这里对传过去的参数赋值初始
    this.searchItemArr=[{type:'input',name:'name',placeholder:this.$t('dept_name')}]
    debugger
    this.$api.getRootDepartment({
      onSucess: resp => {
        let rootDepartment = resp.data.data;
        if(rootDepartment){
          this.defaultSuperior=rootDepartment
        }else{
          this.defaultSuperior=null;          
        }
        
      }
    });
    let tempTableColumnList=[]
    this.tableArr.tableColumns=[...this.tableArr.tableColumns,...tempTableColumnList]
    // let dataJson={ 
    //   currpage:1,
    //   pagelines:999,
    //   data:{
    //     type:"",
    //     fortable:"tableDept",
    //     domainid: this.$route.query.domainid,
    //     belong:"All"
    //   }
    // }
    // this.$api.getFieldExtends(
    //   dataJson,
    //   {
    //     onSucess: resp => {
    //       let temp=[],tempTableColumnList=[]
    //       this.fieldextends=resp.data.data.datas
    //       this.fieldextends.forEach(elm=>{
    //         if(elm.enabel){
    //           this.fieldextendsList.push(elm);
    //         }
    //         // 扩展字段支持查询
    //         if(elm.isSupportSearch){
    //           this.SupportSearchList.push(elm);
    //         }
    //       })
    //       //处理扩展字段
    //       this.SupportSearchList.forEach(item=>{
    //         temp.push({type:'input',name:item.name,placeholder:item.label})
    //       })
    //       this.fieldextendsList.forEach((ite)=>{
    //         tempTableColumnList.push({prop:ite.name,label:ite.label})
    //       })
    //       this.searchItemArr=[...this.searchItemArr,...temp]
    //       //列表添加扩展字段
    //       this.tableArr.tableColumns=[...this.tableArr.tableColumns,...tempTableColumnList]
    //     }
    //   }
    // );
  },
  provide() {
    return {
      changeMultiSelection: this.changeMultiSelection
    };
  },
  mounted(){
  },
  data() {
    return {
      deptSelectVisible: false,
      searchdata: {
        domainid: this.$route.query.domainid,
        superiorid: "",
        currpage: 1,
        pagelines: 10,
        orderby: "",
        data:{
          name: "",
        }
      },
      content: {}, //部门信息对象
      tableData: {},
      multipleTable:[], //部门列表的复选框所需
      multipleSelection:[],//选中部门的id
      defaultSuperior:"",//默认的上级部门
      defaultSubSuperior:"",//选中的部门信息
      timer:'',
      fieldextends:[],
      fieldextendsList:[],
      options:[],
      radioValue:'',
      checkboxList:[],
      selectValue:'',
      empty:"",
      tableListConHeight:null,
      treeListConHeight:null,
      fileUploadVisible:false,
      nowOption:"depImport",
      imgBase:'',
      SupportSearchList:[],
      detailVisible: false,
      dialogTitle: '',
      searchItemArr:[],
      headerArr:[],
      tableArr:{
        tableColumns:[
              {prop:'name',label:this.$t('dept_name')},
              {prop:'superiorName',label:this.$t('superior_dept')},
              {prop:'level',label:this.$t('level')},
          ]
      }
    };
  },
  methods: {
    changeMultiSelection(data){
      this.multipleSelection=data
    },
    onChunkBtnClick({name,data}){
      debugger
      if(name=='new'){this.onCreateBtnClick()}
      else if(name=='del'){this.onDeleteBtnClick()}
      else if(name=='import'){this.onImportBtnClick()}
      else if(name=='rowClick'){this.onRowClick(data)}
      else{
          this.searchdata={
            ...this.searchdata,
            ...data
          }
          this.searchTableData()
      }
    },
    onBtnDialogClick(name){
      debugger
      if(name=='save'){
        this.updateDetail()
      }
    },
    onNodeClick(dept) {
      this.searchdata.superiorid = dept.id;
      this.defaultSubSuperior=dept
      this.showList();
    },
    updateDetail(){
      this.$refs['editDetail'].onSaveBtnClick();
    },
    updateList(){
      this.showList()
      this.timer=new Date().getTime()
      this.$forceUpdate()
      this.defaultSubSuperior=""
    },
    onSelectDept() {
      this.deptSelectVisible = true;
    },

    onSelectDeptOk(dept) {
      if(this.content.id == dept.id){
        this.$message({
          showClose: true,
          message: "上级部门不能选择自己",
          type: "error"
        });
        return false;
      }
      this.content.superior = dept;
    },

    showDetail(dept) {
      this.content = dept;
      this.detailVisible = true;
    },

    showList() {
      this.searchTableData();
      this.detailVisible = false;
    },

    //新建
    onCreateBtnClick() {
      this.showDetail({superior:this.defaultSubSuperior?this.defaultSubSuperior:this.defaultSuperior,valid:1,name: '',orderByNo:0});
      this.dialogTitle = this.$t('dept_new')
    },
    //部门导入
    onImportBtnClick(){
      this.fileUploadVisible=true;
    },
    //删除
    onDeleteBtnClick(){
        this.$api.deleteDepartment({
          data:this.multipleSelection
        },{
          onSucess:resp =>{
            if(resp.data.errcode==0){
              this.$refs.chunkItem.clearSelection()//手动清除
              this.$message({
                  showClose: true,
                  message: this.$t('msg_del_success'),
                  type: "success"
                });
              this.timer=new Date().getTime();
              this.searchTableData();
            }else{
              this.$message({
                  showClose: true,
                  message: resp.data.errmsg,
                  type: "error"
                });
            }
          },
          onError:function(){

          }
        })
    },
    updateDept(){
      this.timer=new Date().getTime();
      this.searchTableData()
    },
    searchTableData() {
      let params = {
        ...this.searchdata,
        valid:'',
        data:{
          name:this.searchdata.data.name,
          fieldExtends:{
              // ...this.searchdata.data
          }
        }
      }
      //删除fieldextends中的name属性
      delete params.data.fieldExtends.name
      params.data.name= params.data.name.replace(/\%/g, '%25')
      debugger
      this.$api.getSubDepartments(params, {
        onSucess: resp => {
          let data = resp.data.data;
          if(data.datas){
            for(let i=0;i<data.datas.length;i++){
              if(data.datas[i].superior){
                data.datas[i].superiorName = data.datas[i].superior.name;
              }
            }
          }
          this.tableData = resp.data.data;
          //这里对table的传值赋值
          this.tableArr={
              ...this.tableArr,
              ...this.tableData,
            }
            this.$set(this.searchdata,'currpage',this.tableArr.pageNo)
            this.$refs.chunkItem.cancelInterval()
        }
      });
    },

    onRowClick(row) {
      this.$api.getDepartmentUsers(row.id,{currpage: 1, pagelines: 5}, {
          onSucess: resp => {
            this.dialogTitle = this.$t('dept_edit');
            row.subUser=resp.data.data;
            this.content = JSON.parse(JSON.stringify(row));
            this.detailVisible = true;
        }
      });
      
    },
  }
};
</script>

<style lang="scss">
.detail{
  .el-dialog{
    .el-dialog__body{
      overflow: hidden;
      padding: 0 !important;
    }
  }
}
</style>